<template>
    <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
        <div style="width: 200px;padding-left: 30px;font-weight: bold;color: blue">后台管理</div>
        <div style="flex: 1"></div>
        <div class="personal_center" v-if="user.username != null">
            <div class="head_div">
                <el-avatar :size="40" :src="user.headPic" style="margin-top: 5px"/>
            </div>
            <div class="my_info">
                <el-dropdown style="line-height: 50px;">
                    <span class="el-dropdown-link">
                        <span class="username_div">{{ user.username }}</span><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="this.$router.push('/userInfo')">个人信息</el-dropdown-item>
                            <el-dropdown-item @click="logout">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
import '@/assets/css/backstage/backstageHeader.css';
import request from "@/utils/request";

export default {
    name: "BackStageHeader",
    props: {
        user: {
            type: Object,
            default: {}
        }
    },
    created() {
        this.getUser();
    },
    data() {
        return {
            user: null,
            token: "",
        }
    },
    methods: {
        getUser() {
            if (localStorage.getItem("admin-user") != null) {
                this.user = JSON.parse(localStorage.getItem("admin-user")).user;
                this.token = JSON.parse(localStorage.getItem("admin-user")).token;
            } else {
                this.user = {};
                this.$message({
                    type: "error",
                    message: "请先登录"
                })
                this.$router.push("/backstage/login")
                return;
            }
            request.get("checkToken", {
                headers: {
                    token: this.token
                }
            }).then(res => {
                if (!res) {
                    this.$message({
                        type: "error",
                        message: "登录信息已过期，请重新登录"
                    })
                    this.$router.push("/backstage/login");
                } else {
                    this.user = JSON.parse(localStorage.getItem("access-user")).user;
                }
            })
        }
    }
}
</script>

<style scoped>

</style>